<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
    <style>
        #yaoqinglist > tr:hover {
            background-color: #fff;
        }
    </style>
</head>
<body layadmin-themealias="default">

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body" pad15="">
                    <div class="layui-form" wid100="" lay-filter="">
                        <div class="layui-form-item">
                            <label class="layui-form-label">任务类别</label>
                            <div class="layui-input-inline">
                                <select name="type" class="layui-select" lay-verify="required" id="changeTypeSelect" lay-filter="changeTypeSelect">
                                    {volist name="type_cate" id="vo"}
                                    <option value="{$key}">{$vo}</option>
                                    {/volist}
                                </select>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">任务标题</label>
                            <div class="layui-input-inline">
                                <select name="name" class="layui-select" lay-verify="required" id="titleName" lay-filter="titleName">
                                    <option value="">请先选择任务标题</option>
                                    {volist name="allow_add_list" id="vo"}
                                    <option value="{$vo}">{$vo}</option>
                                    {/volist}
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item frequencyItem">
                            <label class="layui-form-label">条件次数</label>
                            <div class="layui-input-inline">
                                <input placeholder="请输入条件次数" class="layui-input" name="frequency" value="1" lay-verify="required|number" onkeyup="clearNoNum(this)">
                            </div>
                            <div class="layui-input-inline" style="width:auto" id="promptContent">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">规则说明</label>
                            <div class="layui-input-block">
                                <textarea placeholder="" class="layui-textarea" name="description" lay-verify="required"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item" style="margin-bottom: 0px">
                            <label class="layui-form-label">权重</label>
                            <div class="layui-input-block">
                                <input placeholder="" class="layui-input" name="weight" value="1" lay-verify="required|number">
                            </div>
                        </div>
                        <div class="layui-row">
                            <div style="color: red;height:20px;line-height: 20px;margin-left:130px;font-size: 12px;margin-bottom: 2px">前端排序 相同完成度 按权重的大小倒序排序</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">奖励经验值</label>
                            <div class="layui-input-block">
                                <input placeholder="请输入需要奖励多少经验值" class="layui-input" name="exp" value="0" lay-verify="number" onkeyup="clearNoNum(this)">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">奖励钻石</label>
                            <div class="layui-input-block">
                                <input placeholder="请输入需要奖励多少钻石" class="layui-input" name="gold" value="0" lay-verify="number" onkeyup="input_num(this)">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">奖励宝石</label>
                            <div class="layui-input-block">
                                <input placeholder="请输入需要奖励多少宝石" class="layui-input" name="diamond" value="0" lay-verify="number" onkeyup="input_num(this)">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">奖励贵族</label>
                            <div class="layui-input-block">
                                <input placeholder="奖励贵族的意思是：1为1天，以此类推；" class="layui-input" name="nobel_day" value="0" lay-verify="number" onkeyup="clearNoNum(this)">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">奖励礼物</label>
                            <div class="layui-input-inline" id="giftArea" style="width:auto">
                                <!--<div class="layui-form-item">-->
                                <!--    <div class="layui-inline">-->
                                <!--        <button id="addGift" type="button" class="layui-btn layui-btn-warm layui-btn-sm">-->
                                <!--            <i class="layui-icon">&#xe654;</i>添加礼物-->
                                <!--        </button>-->
                                <!--    </div>-->
                                <!--</div>-->
                                <div class="layui-input-inline">
                                    <select name="gift_id" class="layui-select" lay-verify="">
                                        <option value="">请先选择礼物</option>
                                        {volist name="gift_list" id="vo"}
                                        <option value="{$vo.id}">{$vo.title}</option>
                                        {/volist}
                                    </select>
                                </div>

                                <div class="layui-inline">
                                    <label class="layui-form-label">数量：</label>
                                    <div class="layui-input-inline">
                                        <input placeholder="礼物数量" class="layui-input" name="gift_num" value="1" lay-verify="" onkeyup="clearNoNum(this)">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">奖励道具</label>
                            <div class="layui-input-inline" id="propsArea" style="width:auto">
                                <!--<div class="layui-form-item">-->
                                <!--    <div class="layui-inline">-->
                                <!--        <button id="addProps" type="button" class="layui-btn layui-btn-warm layui-btn-sm">-->
                                <!--            <i class="layui-icon">&#xe654;</i>添加道具-->
                                <!--        </button>-->
                                <!--    </div>-->
                                <!--</div>-->
                                <div class="layui-input-inline">
                                    <select name="props_id" class="layui-select" lay-verify="">
                                        <option value="">请先选择道具</option>
                                        {volist name="props_new" id="vo"}
                                        <option value="{$vo.id}">{$vo.name}</option>
                                        {/volist}
                                    </select>
                                </div>

                                <div class="layui-inline">
                                    <label class="layui-form-label">数量：</label>
                                    <div class="layui-input-inline">
                                        <input placeholder="数量" class="layui-input" name="props_num" value="1" lay-verify="" onkeyup="clearNoNum(this)">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">转盘抽奖次数</label>
                            <div class="layui-input-block">
                                <input placeholder="转盘抽奖次数" class="layui-input" name="luck_draw" value="0" lay-verify="number" onkeyup="clearNoNum(this)">
                            </div>
                        </div>

                        <!--
                        <div class="layui-form-item">
                            <label class="layui-form-label">任务开始时间</label>
                            <div class="layui-input-block">
                                <input placeholder="请选择限时任务开始时间" type="text" class="layui-input" name="begin_time" value="" id="begin_time_input" readonly>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">任务结束时间</label>
                            <div class="layui-input-block">
                                <input placeholder="请选择限时任务结束时间" type="text" class="layui-input" name="end_time" value="" id="end_time_input" readonly>
                            </div>
                        </div>-->

                        <div class="layui-form-item">
                            <label class="layui-form-label">跳转页面标识</label>
                            <div class="layui-input-inline">
                                <select name="page_tag" class="layui-select">
                                    <option value="">请选择</option>
                                    {volist name="page_tag_cate" id="vo"}
                                    <option value="{$key}">{$vo}</option>
                                    {/volist}
                                </select>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">状态</label>
                            <div class="layui-input-block">
                                <input type="radio" name="status" value="0" title="启用" checked/>
                                <input type="radio" name="status" value="1" title="停用"/>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit="" lay-filter="task-add">确认保存</button>
                                <button class="layui-btn layui-btn-primary layuiadmin-btn-push" data-type="cancel">取消</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/layuiadmin/layui/layui.js"></script>
<script src="/static/jquery.min.js"></script>
<script src="/assets/cos-js-sdk-v5/cos-js-sdk-v5.js"></script>
<script>
    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
        , version: "{:config('other.ui_version')}"
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'task', 'form', 'admin', 'laydate'], function () {
        var $ = layui.$
            , laydate = layui.laydate
            , form = layui.form;

        //执行一个laydate实例
        $(this).removeAttr("lay-key");
        laydate.render({
            elem: '#begin_time_input',
            type: 'datetime',
            trigger: 'click',
            min: '<?php echo date("Y-m-d H:i:s");?>',
        });
        laydate.render({
            elem: '#end_time_input',
            type: 'datetime',
            trigger: 'click',
            min: '<?php echo date("Y-m-d H:i:s");?>',
        });

        // 任务类别选择
        form.on('select(changeTypeSelect)', function (data) {
            let html = '<option value="">请选择任务标题</option>';
            if (data.value == 3) {
                html += `{volist name="checkin_type" id="vo"}
                <option value="{$key}">{$vo}</option>
                {/volist}`;
            } else {
                html += `{volist name="allow_add_list" id="vo"}
                <option value="{$vo}">{$vo}</option>
                {/volist}`;
                // 移除“条件次数”只读设置
                $('input[name=frequency]').removeAttr("readonly");
                $('input[name=frequency]').val(1);
            }

            $("#titleName").html(html);
            form.render();
        });

        // 任务标题选择
        form.on('select(titleName)', function (data) {
            if ($('#changeTypeSelect').val() == 3 && data.value >= 1 && data.value <= 8) {
                // 添加“条件次数”只读设置
                $('input[name=frequency]').attr("readonly","readonly");
                $('input[name=frequency]').val(data.value);
            }else{
                // 移除“条件次数”只读设置
                $('input[name=frequency]').removeAttr("readonly");
                $('input[name=frequency]').val(1);
            }

            var promptContent = '';
            switch (data.value) {
                case '发送N条弹幕':
                    promptContent = '例如:条件次数是3则代表：发送3条弹幕才能领取奖励';
                    break;
                case '订阅N个主播':
                    promptContent = '例如:条件次数是3则代表：订阅3个主播才能领取奖励';
                    break;
                case '给N个主播送礼':
                    promptContent = '例如:条件次数是3则代表：给3个主播送礼才能领取奖励';
                    break;
                case '开播N分钟':
                    promptContent = '例如:条件次数是3则代表：开播3分钟才能领取奖励';
                    break;
                case '分享N个直播间':
                    promptContent = '例如:条件次数是3则代表：分享3个直播间才能领取奖励';
                    break;
                case '观看直播N秒':
                    promptContent = '例如:条件次数是3则代表：观看直播3秒才能领取奖励';
                    break;
                case '观看直播N分钟':
                    promptContent = '例如:条件次数是3则代表：观看直播3分钟才能领取奖励';
                    break;
            }

            $("#promptContent").html('<p>' + promptContent + '</p>');
        });

        //事件
        var active = {
            cancel: function () {
                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.layer.close(index); //再执行关闭
            }
        };

        $('.layui-btn.layuiadmin-btn-push').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //动态添加礼物选择
        var gift_total = 1;
        $("#addGift").click(function () {
            var str = `<div class="layui-form-item">
                                    <div class="layui-input-inline">
                                        <select name="gift[${gift_total}][id]" class="layui-select" lay-verify="required">
                                            <option value="">请先选择礼物</option>
                                            {volist name="gift_list" id="vo"}
                                            <option value="{$vo.id}">{$vo.title}</option>
                                            {/volist}
                                        </select>
                                    </div>

                                    <div class="layui-inline">
                                        <label class="layui-form-label">礼物数量：</label>
                                        <div class="layui-input-inline">
                                            <input placeholder="礼物数量" class="layui-input" name="gift[${gift_total}][num]" value="1" lay-verify="number">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <button type="button" class="layui-btn layui-btn-danger  layui-btn-sm removeGift">
                                            <i class="layui-icon">&#xe67e;</i>
                                        </button>
                                    </div>
                                </div>`


            $("#giftArea").append(str);
            layui.form.render("select");//重新渲染 固定写法
            gift_total++;
        });

        //删除动态添加的礼物选择
        $("body").on('click', ".removeGift", function () {
            //元素移除前校验是否被引用
            var approvalName = $(this).parent().prev('div.layui-input-inline').children().val();
            var parentEle = $(this).parent().parent();
            parentEle.remove();
        });
    });

    function clearNoNum(obj) {
        obj.value = obj.value.replace(/[^\d]/g, "");
        obj.value = obj.value.replace(/^\./g, "");
    }

    function input_num(obj) {
        obj.value = obj.value.replace(/[^\d.]/g, "");
        obj.value = obj.value.replace(/^\./g, "");
        obj.value = obj.value.replace(/\.{2,}/g, ".");
        obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
        obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');

        if (obj.value.indexOf(".") > 0 && obj.value.indexOf("0") > 2) {
            obj.value = parseFloat(obj.value);
        }
        if (obj.value.indexOf(".") > 0 && obj.value.lastIndexOf("0") > 2) {
            obj.value = parseFloat(obj.value);
        }
        if (obj.value.indexOf(".") <= 0 && obj.value != "") {
            obj.value = parseFloat(obj.value);
        }
    }
</script>
</body>
</html>
